<template>
  <div
    class="tag"
    :style="color?{color:color}:null"
  >
    <em-icon
      :name="icon"
      :color="iconColor?iconColor:null"
      :class-prefix="iconPrefix"
    />
    <span
      v-if="label"
      class="tag-text"
    >{{ label }}</span>
  </div>
</template>

<script>
export default {
  name: 'IconLabel',
  props: {
    icon: {
      type: String,
      default: ''
    },
    iconPrefix: {
      type: String,
      default: 'em-icon'
    },
    label: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: ''
    },
    iconColor: {
      type: String,
      default: ''
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: space-around;
  color: #747474;
  &-text {
    padding-left: 2px;
  }
}
</style>
